<template>
  <div class="evaluate-container">
    <div class="evaluate-box">
      <div class="evaluate-header">
        <el-button @click="goBack" type="default" icon="ArrowLeft">返回</el-button>
        <div class="evaluate-title">评价维修工单</div>
      </div>
      <div class="workorder-info">
        <p>工单编号: {{ workorderId }}</p>
        <p>设备名称: {{ workorderInfo.deviceName }}</p>
        <p>维修人员: {{ workorderInfo.repairmanName }}</p>
      </div>
      <div class="rating-section">
        <span class="rating-label">满意度评分:</span>
        <div class="stars">
          <el-rate v-model="rating" :max="5" show-text></el-rate>
        </div>
      </div>
      <el-form ref="evaluateForm" :model="evaluateForm" :rules="evaluateRules" class="evaluate-form">
        <el-form-item prop="comment">
          <el-input v-model="evaluateForm.comment" type="textarea" placeholder="请输入评价内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit" class="submit-btn">提交评价</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import { getToken } from '~/composables/auth';
import { toast } from '~/composables/util';

const router = useRouter();
const route = useRoute();
const workorderId = ref(route.query.id);
const workorderInfo = ref({});
const rating = ref(5);
const evaluateForm = ref({
  comment: ''
});

const evaluateRules = ref({
  comment: [{ required: true, message: '请输入评价内容', trigger: 'blur' }]
});

onMounted(() => {
  if (!getToken()) {
    toast('请先登录', 'warning');
    router.push('/login');
    return;
  }

  if (!workorderId.value) {
    toast('无效的工单ID', 'error');
    router.push('/workorder-list');
    return;
  }

  fetchWorkorderDetails();
});

const fetchWorkorderDetails = async () => {
  try {
    const res = await axios.get(`/api/workorder/detail?id=${workorderId.value}`, {
      headers: {
        'Authorization': getToken()
      }
    });
    workorderInfo.value = res.data;
  } catch (error) {
    toast('获取工单详情失败，请稍后重试', 'error');
  }
};

// 假设从本地存储或全局状态获取用户ID
    const userId = ref(JSON.parse(localStorage.getItem('userInfo'))?.id || 0);

    const handleSubmit = async () => {
      if (!userId.value) {
        toast('无法获取用户信息，请重新登录', 'error');
        return;
      }

      try {
        await axios.post('/Comment', null, {
          params: {
            user_id: userId.value,
            Order_id: workorderId.value,
            feedback: evaluateForm.value.comment,
            rating: rating.value
          },
          headers: {
            'Authorization': getToken()
          }
        });
        toast('评价提交成功');
        router.push('/workorder-list');
      } catch (error) {
        toast('评价提交失败，请稍后重试', 'error');
        console.error('评价提交失败:', error);
      }
    };

const goBack = () => {
  router.back();
};
</script>

<style scoped>
.evaluate-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.evaluate-box {
  width: 600px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.evaluate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.evaluate-title {
  text-align: center;
  font-size: 24px;
  color: #333;
}

.workorder-info {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.rating-section {
  margin-bottom: 20px;
}

.rating-label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

.stars {
  display: flex;
  align-items: center;
}

.evaluate-form {
  margin-top: 20px;
}

.submit-btn {
  width: 100%;
}
</style>